let arr = ['../image/1.jpg', '../image/2.jpg', '../image/3.png', '../image/4.jpg']
let index = 0;

// 找到元素box
let box = document.querySelector('.box');
//找元素left
let left = document.querySelector('.left');
left.onclick = function () {
    index--;
    if (index <= 0) {
        index = arr.length - 1;
    }
    replace(index)
}
//找元素right
let right = document.querySelector('.right');
right.onclick = function () {
    index++;
    if (index > arr.length - 1) {
        index = 0;
    }
    replace(index)
}

//替换元素节点
function replace(index) {
    let pic = document.querySelector('.pic');
    //克隆旧的pic 图片地址换掉
    let img = pic.cloneNode(true);
    img.src=arr[index];
    //父节点调用 替换函数 前放新的元素 后面旧元素
    box.replaceChild(img, pic);

}

//定时器  是让向右自动替换
setInterval(function () {
    index++;
    if (index > arr.length - 1) {
        index = 0;
    }
    replace(index);
}, 1000)